<style>
    *{
        margin: 0; 
        padding: 0;
    }
    html, body, #root{
        height: 100%;
    }
    #root{
        display: flex;
    }
    .menu{
        width: 200px;
        height: 100%;
        background-color: #123456;
        transition: .2s ease;
    }
    .menu h2{
        background: url(./苹果.png) no-repeat left center;
        padding-left: 40px;
        line-height: 40px;
        margin: 10px 0;
    }
    .main{
        flex: 1;
        background-color: #234567;
    }
    .main h1{
        width: 90%;
        margin:auto;
        background-color: #345678;
        padding: 200px 0;
    }
</style>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1">
<link rel="stylesheet" href="./transition.css">


<div id="root">
    <div class="menu" :style="{width: menuWidth+'px'}">
        <h2 @click="who='index'">{{menuWidth===200?'后台首页':'首页'}}</h2>
        <h2 @click="who='goods'">{{menuWidth===200?'商品列表':'商品'}}</h2>
        <h2 @click="who='orders'">{{menuWidth===200?'订单列表':'订单'}}</h2>
    </div>
    
    <div class="main">
        <div class="top">
            <button @click="changeMenuFn">菜单</button>
            <span>首页&gt;</span>
            <span>后台&gt;</span>
            <transition
                appear
                name="breadcrumb"
            >
                <span 
                    v-for="item in [
                        {menu1: '首页', menu2: '欢迎页', who:'index'},
                        {menu1: '商品管理', menu2: '列表', who:'goods'},
                        {menu1: '订单管理', menu2: '列表', who:'orders'},
                    ]"
                    :key="item"
                    v-if="item.who === who"
                    style="display: inline-block;"
                >
                    {{item.menu1}} &gt;  {{item.menu2}}
                </span>
            </transition>
        </div>

        <div class="content">
            <transition 
                mode="out-in"
                name="fade-transform"
            >
                <component :is="who"></component>
            </transition>
           
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('index', {template:`<h1>首页内容</h1>`})
    Vue.component('goods', {template:`<h1>商品内容</h1>`})
    Vue.component('orders', {template:`<h1>订单内容</h1>`})

    const vm = new Vue({
        el: "#root",
        data: {
            who: 'index',
            menuWidth:200,
        },
        methods:{
            changeMenuFn(){
                this.menuWidth = this.menuWidth === 200? 100:200
            }
        }
    })
</script>